<template>
  <div class="map-container">
    <div ref="map" id="map"></div>
  </div>
</template>

<script>
import { loadTMap, unloadTMap } from "./map.js";

export default {
  data() {
    return {
      mapObj: null,
      district: null,
    };
  },
  mounted() {
    this.initMap();
  },
  beforeUnmount() {
    this.destroyMap();
  },
  methods: {
    // 初始化地图
    async initMap() {
      try {
        const TMap = await loadTMap();
        //定义地图中心点坐标
        var center = new TMap.LatLng(26.241266155344846, 117.6186159112001);
        this.mapObj = new TMap.Map(this.$refs["map"], {
          center, // 设置地图中心点坐标
          zoom: 15, //设置地图缩放级别
          pitch: 20, // 俯仰度
          rotation: 0, // 旋转角度，
          mapStyleId: "style1", // 个性化样式
          showControl: false, // 移除控制器
          // disableDefaultUI: true,
          renderOptions: {
            enableBloom: true, // 是否启用泛光效果 注：为true才会有效果
          },
        });
        // 移除单个控制器
        // this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.SCALE);
        // this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ZOOM);
        // this.mapObj.removeControl(TMap.constants.DEFAULT_CONTROL_ID.ROTATION);
        // 去除logo及水印，开发文档中也有去除LOGO的方法，但不能去除左下角信息
        var a = document.querySelector("canvas+div:last-child");
        a.style.display = "none";
        this.highlightArea();
      } catch (error) {
        console.error("Error loading Tencent Map:", error);
      }
    },
    // 高亮行政区划
    highlightArea() {
      console.log("TMap", TMap);
      var district = new TMap.service.District({
        // 新建一个行政区划类
        polygon: 2, // 返回行政区划边界的类型
      });
    },

    destroyMap() {},
  },
};
</script>

<style lang="scss" scoped>
#map,
.map-container {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
